<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title></title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
        <style>
            body, html {
                height: 100%;
            }
            .title span{
                padding-top:20px;
                width:100%;
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                margin: 0 auto;
            }
            .btn {
                width: 50px;
                height: 50px;
            }
            .input-wrap {
                margin: 10px 0;
                display: -webkit-box;
                line-height: 30px;
                border-bottom:1px solid rgba(255,255,255,0.8);
                vertical-align: middle;
            }
            .form {
                margin: 0 20px 0 20px;
                padding: 0 20px;
                line-height: 30px;
            }
            .input-wrap input {
                display: block;
                -webkit-box-flex: 1;
                outline: none;
                border:none;
                height: 30px;
                font-size:1.4em;
                color:#fff;
                font-family:"Arial";
                -web-kit-appearance:none;
                padding:0 1em;
                text-decoration:none;
                background-color: transparent;
                margin-top:20px;
            }
            .button.blue {
                background-color: #38a0df;
            }
            .button.blue:active{
                background-color: #0068B0;
            }
            .button {
                display: block;
                color: white;
                margin: 10px 40px;
                text-align: center;
                border-radius: 8px;
                height: 40px;
                line-height: 40px;
            }
            .margin-top-25 {
                margin-top: 25px;
            }
            .login-error {
                color: #FF0000;
                font-size: 18px;
                text-indent: 2em;
                display: none;
                padding-top: 8px;
            }
            .hint{
                margin-top:20px;
            }
            .hint span{
                text-align:center;
                display:block;
            }
            .content{
                position:absolute;
                width:100%;
                top:10%;
            }
            input[type=password],input[type=text],input[type="number"]{
                margin-bottom:0;
                border-radius: 0;
            }
            .red{
            	border-bottom:1px solid red !important;
            }
            .hidden{
            	display:none;
            }
            ::-webkit-input-placeholder {
				font-size:14px;
			} 
			.aui-btn{
				margin-top:15px;
			    background-color: #38a0df;
			    border: 1px solid #38a0df;
			    color:#FFFFFF;
			    font-family: "黑体";
			}
			.aui-btn:active{
				background-color: #0068B0;
			}
			input::-webkit-input-placeholder{
			    color: #fff;opacity:1;
			}
        </style>
    </head>
    <body>
        <div class="content">
            <div class="form">
                <div class="input-wrap">
                    <input type="text" placeholder="真实姓名" maxlength="7" class="txt" id="name" value=""/>
                </div>
                <div class="input-wrap">
                    <input type="text" placeholder="昵称" maxlength="7" class="txt" id="nickname" value=""/>
                </div>
                <div class="input-wrap">
                    <input type="number" placeholder="手机号" maxlength="11" class="txt" id="phone" value="" oninput="check();"/>
                </div>
                <div class="input-wrap" id="verify">
                    <input type="text" placeholder="短信验证码" maxlength="6" class="txt" id="checknum" value=""/>
                    <span class="aui-input-addon">
	                    <div class="aui-btn" id="sendVerify" status="1" tapmode onclick="getVerify()">获取验证码</div>
	                </span>
                </div>
                <div class="input-wrap">
                    <input type="password" placeholder="密码" maxlength="20" class="txt" id="password" value=""/>
                </div>
                <div class="input-wrap">
                    <input type="password" placeholder="确认密码" maxlength="20" class="txt" id="repassword" value=""/>
                </div>
                <div class="input-wrap">
                    <input type="text" placeholder="推荐码" maxlength="6" class="txt" id="referral" value="" />
                </div>
            </div>
            <p class="login-error" id="errorTip"></p>
            <div class="button blue" id="login" tapmode="" onclick="register()">
                完成注册
            </div>
        </div>
    </body>
    <script data-main="../../script/main" src="../../script/require.js"></script>
    <script>
        require(["zepto","api","md5","common"],function(){
        	$(".txt").on("focus",function(){
	        	$(this).parent().removeClass("red");	
	    	});
        });
        
        var verify_flag = false;//智能验证通过标志
        var times,isinerval;
        apiready = function() {
        	
            smsVerify = api.require('smsVerify');
            smsVerify.register(function(ret, err){
                if(ret.status){
                    console.log("注册成功");
                }else{
                    console.log("注册失败");
                }
            });
        };
        
        function getVerify(){
        	if(!checkMobile($("#phone").val())){
        		$("#phone").addClass("red");
        		api.toast({
	                msg:'手机号码有误'
                });
        		return;
        	}
        	var status = $("#sendVerify").attr('status');
	        if(status!=1){
	            return;
	        }
	        $("#sendVerify").removeAttr('onclick');
	        api.parseTapmode();
	        $("#sendVerify").html('<span id="GetVerify">60</span>S');
	        times = 59;
	        isinerval = setInterval("CountDown()", 1000);
            smsVerify.sms({
                phone:$("#phone").val(),
                country:"86"
            },function(ret, err){
                if(ret.status){
                    if( ret.smart == true ){    // 安卓版特有功能 智能验证
                    	verify_flag = true;
                    	$("#verify").addClass("hidden");
                        api.toast({msg: '智能验证成功，无需验证码验证'});
                    }else{
                        api.toast({msg: '短信发送成功'});
                    }
                }else{
                    api.toast({msg: err.msg});
                }
            });
        }
	    function CountDown() {
	        if (times < 1) {
	            $("#sendVerify").attr('onclick','getVerify()');
	            $("#sendVerify").attr('status',1);
	            api.parseTapmode();
	            $("#sendVerify").html('重新获取');
	            clearInterval(isinerval);
	            return;
	        }
	        $("#GetVerify").html(times);
	        times--;
	    }
        function verifyCode(){
            smsVerify.verify({
                phone:$("#phone").val(),
                country:"86",
                code:$("#checknum").val()
            },function(ret, err){
                if(ret.status){
                	sendAjax();
                }else{
                	$("#checknum").addClass("red");
                    api.alert({msg: err.msg});
                }
            });
        }
        
        function register(){
        	var retmsg = checkValues();
        	if(retmsg){
        		api.toast({
	                msg:retmsg
                });
        		return;
        	}
        	if(verify_flag)
        		sendAjax();
        	else
        		verifyCode();
        }
        
        function sendAjax(){
        	var data={
        		values:{
            		name : $("#name").val(),
            		nickname : $("#nickname").val(),
            		phone : $("#phone").val(),
            		password : $zb.getmd5text($("#password").val()),
            		referral : $("#referral").val()
            	}
        	}
        	$zb.requestForData(data,'common','register',function(ret){
        		if(ret.status=="OK"){
        			$zb.prefs.setPrefs('token',ret.data['token']);
                    $zb.prefs.setPrefs('userInfo',JSON.stringify(ret.data));
                    api.openWin({
			            name: 'homepage',
			            url: '../homepage/homepage_win.html'
		            });
        		}else{
        			api.toast({
	                    msg:ret.status
                    });
        		}
        	})
        }
        
        function check(){
        	if(verify_flag)
        		$("#verify").removeClass("hidden");
        }
        
        function checkMobile(str) {
 			var re = /^1\d{10}$/;
 			if (re.test(str)) {
 				return true;
			} else {
				return false;
			}
		}

        
        function checkValues(){
        	var ret_message=null;
        	if(!$("#name").val()){
        		ret_message = "请输入真实姓名";
        		$("#name").parent().addClass("red");
        		return ret_message;
        	}
        	if(!$("#nickname").val()){
        		ret_message = "请输入昵称";
        		$("#nickname").parent().addClass("red");
        		return ret_message;
        	}
        	if(!$("#phone").val()){
        		ret_message = "请输入手机号";
        		$("#phone").parent().addClass("red");
        		return ret_message;
        	}
        	if(!$("#password").val()){
        		ret_message = "请输入密码";
        		$("#password").parent().addClass("red");
        		return ret_message;
        	}
        	if(!$("#repassword").val()){
        		ret_message = "请确认密码";
        		$("#repassword").parent().addClass("red");
        		return ret_message;
        	}
        	if($("#password").val()!=$("#repassword").val()){
        		ret_message = "两次密码输入不一致";
        		$("#repassword").parent().addClass("red");
        		return ret_message;
        	}
        }
    </script>
</html>